<template>
    <!-- :route="route" 传递当前路由对象 -->
    <panel-head :route="route" />
        <!-- 权限列表 -->
    <el-table :data="tableData.list" style="width:100%">
        <!-- 如果不自定义列里面的内容，直接用单标签就行 -->
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="昵称" />
        <!-- 该列绑定的数据字段是数据源中的 permissions_id -->
        <el-table-column prop="permissions_id" label="所属组别">
            <template #default="scope">
               {{ permissionName(scope.row.permissions_id) }}
            </template>
        </el-table-column>

        <el-table-column prop="mobile" label="手机号" />

        <el-table-column prop="active" label="状态">
            <template #default="scope">
               <el-tag :type="scope.row.active ? 'success' : 'danger'">
                {{ scope.row.active ? '正常' : '失败' }}
               </el-tag>
            </template>
        </el-table-column>

        <el-table-column  label="创建时间">
            <template #default="scope">
                <div class="flex-box">
                  <el-icon><Clock /></el-icon>
                  <span style="margin-left: 10px;">{{ scope.row.create_time }}</span>  
                </div>
              
            </template>
        </el-table-column>


        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
        </el-table>
        <!-- 分页组件 -->
     <div class="pagination-info">
         <el-pagination
      v-model:current-page="paginationData.pageNum"
      :page-size=" paginationData.pageSize"
      :background="false"
      size="small"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
         />
     </div>
    <!-- 编辑弹窗 -->
      <el-dialog
     v-model="dialogFormVisable"
     :before-close="beforeClose"
     title="添加权限"
     width="500px"
     >
     <!-- 编辑表单 -->
     <el-form
     ref="formRef"
     label-width="100px"
     label-position="left"
     :model="form"
     :rules="rules"
     >
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" disabled/>
     </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="form.name" />
     </el-form-item>
      <el-form-item label="菜单权限" prop="permissions_id">
        <el-select
        v-model="form.permissions_id"
        placeholder="请选择菜单权限"
        style="width:240px"  
        >
        <el-option
         v-for ="item in options"
         :key ="item.id"
         :label = "item.name"
         :value = "item.id"
        >
        </el-option>
        </el-select>
     </el-form-item>
     </el-form>
     <template #footer>
     <div class ="dialog-footer">
        <el-button type="primary" @click="confirm(formRef)">确认</el-button> 
     </div>
    </template>
     </el-dialog>
</template>

<script setup lang="ts">
import { authAdmin,menuSelectList,updateUser } from '../../../api';
import { onMounted, reactive,ref } from 'vue'
import dayjs from'dayjs'
import { Clock } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const paginationData = reactive({
    //页码 条数
    pageNum: 1,
    pageSize: 10
})
const handleSizeChange = (val) => {
    paginationData.pageSize = val
    getListData()
}
const handleCurrentChange = (val) => {
    paginationData.pageNum = val
    getListData()
}

onMounted(() => {
    getListData()
    //加载权限选项列表
    menuSelectList().then(({ data }) => {
        options.value = data.data
    })
})

//请求列表
const getListData = () => {
    authAdmin(paginationData).then(({ data }) => {
        console.log(data, 'authAdmin')
        const { list, total } = data.data
        // 格式化列表中每条数据的创建时间
        list.forEach(item => {
            item.create_time = dayjs(item.create_time).format('YYYY-MM-DD')
        })
        // 将处理后的数据赋值给表格数据源
        tableData.list = list
        tableData.total = total
    })
}
//弹窗
const dialogFormVisable = ref(false)
const beforeClose = () => {
    dialogFormVisable.value = false       
}
const rules = reactive({
    name: [{ required: true, trigger: 'blur', message: '请填写昵称' }],
    permissions_id : [{required: true, trigger: 'change', message: '请选择菜单权限'}]
})
//编辑表单
const formRef = ref()
const form = reactive({
    name: '',
    permissions_id:''
})

//表单提交
 const confirm = async (formEl) => {
    if (!formEl) return
    //手动触发表单校验
    await formEl.validate((valid, fields) => {
        if(!formEl) return
        if (valid) {
            const { name, permissions_id } = form
            updateUser({ name, permissions_id }).then(({data}) => {
                if (data.code === 10000) {
                    dialogFormVisable.value = false
                    getListData()
                }
            })
        } else {
        console.log('error submit!', fields)
        }

    })
}

const options = ref([])
//根据权限id匹配权限名称
const permissionName = (id) => {
    const data = options.value.find(el => el.id === id)
   return data ? data.name : '超级管理员'
}
//列表数据
const tableData = reactive({
    list: [],
    total:0
})
const open = (rowData) => {
    dialogFormVisable.value = true
    Object.assign(form, {
        mobile: rowData.mobile,
        name: rowData.name,
        permissions_id: rowData.permissions_id
    })
}
</script>

<style lang="less" scoped>
.flex-box {
    display :flex ;
    align-items :center

}
</style>